var React = require('react');
var ModalDialog = require('../../common/component/dialog/modal-dialog.node');
var ModalBody = require('../../common/component/dialog/modal-body.node');
var ModalFooter = require('../../common/component/dialog/modal-footer.node');
module.exports = function AssignFunctionDialog(props) {
  return /*#__PURE__*/ React.createElement(ModalDialog, {
    dialogTitle: "${t('ui.menu.common.dialog.assignFunction')}"
  }, /*#__PURE__*/ React.createElement(ModalBody, null, /*#__PURE__*/ React.createElement("form",
    null, /*#__PURE__*/ React.createElement("nav", null, /*#__PURE__*/ React.createElement("div", {
      className: "nav nav-tabs",
      role: "tablist"
    }, /*#__PURE__*/ React.createElement("button", {
      "data-x-ui": "assignedFunctionNavTab",
      className: "nav-link active",
      type: "button",
      role: "tab",
      "data-toggle": "tab"
    }, "${t('ui.menu.assignFunctionDialog.tab.assignedFunction')}"), /*#__PURE__*/ React.createElement(
      "button", {
        "data-x-ui": "assignableFunctionNavTab",
        className: "nav-link",
        type: "button",
        role: "tab",
        "data-toggle": "tab",
        disabled: true
      }, "${t('ui.menu.assignFunctionDialog.tab.assignableFunction')}"))), /*#__PURE__*/ React.createElement(
      "div", {
        className: "tab-content"
      }, /*#__PURE__*/ React.createElement("div", {
        "data-x-ui": "assignedFunctionTabPane",
        className: "tab-pane fade show active",
        role: "tabpanel"
      }, /*#__PURE__*/ React.createElement("table", {
        "data-x-ui": "assignedFunctionTable",
        className: "x-table-custom",
        "data-x-name": "assignedFunctions",
        "data-x-type": "dataGrid"
      }, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr",
        null, /*#__PURE__*/ React.createElement("th", {
          "data-field": "id",
          "data-visible": "false"
        }, "ID"), /*#__PURE__*/ React.createElement("th", {
          "data-field": "functionCode"
        }, "${t('ui.security.function.field.functionCode')}"), /*#__PURE__*/ React.createElement("th", {
          "data-field": "functionName"
        }, "${t('ui.security.function.field.functionName')}"), /*#__PURE__*/ React.createElement("th", {
          "data-field": "remark"
        }, "${t('ui.system.common.field.remark')}"), /*#__PURE__*/ React.createElement("th", null,
          "${t('ui.system.common.field.operate')}"))))), /*#__PURE__*/ React.createElement("div", {
        "data-x-ui": "assignableFunctionTabPane",
        className: "tab-pane fade",
        role: "tabpanel"
      }, /*#__PURE__*/ React.createElement("div", {
        className: "x-search-bar"
      }, /*#__PURE__*/ React.createElement("form", null, /*#__PURE__*/ React.createElement("div", {
        className: "form-row align-items-center"
      }, /*#__PURE__*/ React.createElement("div", {
        className: "col-auto"
      }, /*#__PURE__*/ React.createElement("label", {
        className: "sr-only",
        htmlFor: "functionCode"
      }), /*#__PURE__*/ React.createElement("div", {
        className: "input-group mb-2"
      }, /*#__PURE__*/ React.createElement("div", {
        className: "input-group-prepend"
      }, /*#__PURE__*/ React.createElement("div", {
        className: "input-group-text"
      }, "${t('ui.security.function.field.functionCode')}")), /*#__PURE__*/ React.createElement(
        "input", {
          type: "text",
          className: "form-control",
          id: "functionCode",
          "data-x-name": "searchFunctionField.functionCode",
          "data-x-type": "autoTrimText"
        }))), /*#__PURE__*/ React.createElement("div", {
        className: "col-auto"
      }, /*#__PURE__*/ React.createElement("label", {
        className: "sr-only",
        htmlFor: "functionName"
      }), /*#__PURE__*/ React.createElement("div", {
        className: "input-group mb-2"
      }, /*#__PURE__*/ React.createElement("div", {
        className: "input-group-prepend"
      }, /*#__PURE__*/ React.createElement("div", {
        className: "input-group-text"
      }, "${t('ui.security.function.field.functionName')}")), /*#__PURE__*/ React.createElement(
        "input", {
          type: "text",
          className: "form-control",
          id: "functionName",
          "data-x-name": "searchFunctionField.functionName",
          "data-x-type": "autoTrimText"
        }))), /*#__PURE__*/ React.createElement("div", {
        className: "col-auto"
      }, /*#__PURE__*/ React.createElement("button", {
        type: "button",
        className: "btn btn-primary mb-2",
        "data-x-ui": "searchFunctionBtn"
      }, "${t('ui.system.common.btn.search')}"))))), /*#__PURE__*/ React.createElement("table", {
        "data-x-ui": "assignableFunctionTable",
        className: "x-table-custom"
      }, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr",
        null, /*#__PURE__*/ React.createElement("th", {
          "data-checkbox": "true"
        }), /*#__PURE__*/ React.createElement("th", {
          "data-field": "id",
          "data-visible": "false"
        }, "ID"), /*#__PURE__*/ React.createElement("th", {
          "data-field": "functionCode"
        }, "${t('ui.security.function.field.functionCode')}"), /*#__PURE__*/ React.createElement("th", {
          "data-field": "functionName"
        }, "${t('ui.security.function.field.functionName')}"), /*#__PURE__*/ React.createElement("th", {
          "data-field": "remark"
        }, "${t('ui.system.common.field.remark')}"), /*#__PURE__*/ React.createElement("th", null,
          "${t('ui.system.common.field.operate')}")))))))), /*#__PURE__*/ React.createElement(ModalFooter, {
    confirmLabel: "${t('ui.system.common.btn.save')}",
    cancelLabel: "${t('ui.system.common.btn.cancel')}"
  }));
};